<template>
  <div>
    <div class="mgb20">
      <el-button type="warning" @click="handleDialogShow">批量下载</el-button>
    </div>

    <base-table
      ref="baseTableContainer"
      :pagination="pagination"
      :table="table"
      @sortChange="handleSortChange"
      @selectionChange="handleSelectionChange"
      @expandChange="handleExpandChange"
      @sizeChange="handlePaging"
      @currentChange="handlePaging"
    >
      <template #typeColumn>
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column type="index" :index="rowIndex" width="60" label="序号" align="center"></el-table-column>
        <el-table-column type="expand" width="1" class-name="ofh">
          <template #default="{row}">
            <div v-loading="row.detail.isLoading" class="full" :class="Object.keys(row.detail.data).length ? '' : 'box--empty'">
              <p v-for="(value, key) in row.detail.data" :key="key">
                <span class="expanded-item-label">{{ key }}：</span>
                <span>{{ value }}</span>
              </p>
            </div>
          </template>
        </el-table-column>
      </template>
      <template #operationColumn>
        <el-table-column label="操作" :min-width="100" align="center">
          <template #default="{row}">
            <el-button type="warning" size="small" @click="handleDownloadFileAsync(row)">下载</el-button>
            <el-button type="primary" size="small" @click="toggleRowExpansion(row)">详情</el-button>
          </template>
        </el-table-column>
      </template>
    </base-table>

    <!--批量下载确认框-->
    <base-dialog ref="dialog" title="批量下载" :dialogId="dialogId" @dialogConfirm="handleDialogSubmit" @dialogClose="hideDialog">
      <p class="base-dialog-tooltip tc">
        当前选中
        <span data-status-text="warning">{{ table.selectParams ? table.selectParams.length : 0 }}</span>
        条数据，确定要下载这些数据吗？
      </p>
    </base-dialog>
  </div>
</template>

<script setup>
  import useTable from '@/composables/useTable';
  import useDialog from '@/composables/useDialog';
  import useFileDownload from '@/composables/useFileDownload';
  import {getCurrentInstance, onMounted} from 'vue';

  const {proxy} = getCurrentInstance();
  const {dialogId, hideDialog, showDialog} = useDialog(proxy);
  const {
    table,
    pagination,
    rowIndex,
    setTableData,
    setExpandRowDetail,
    getTableRequestParams,
    handleSortChange,
    handlePaging,
    handleVisibleColumnsChange,
    handleSelectionChange,
    handleExpandChange,
    toggleRowExpansion
  } = useTable(proxy);
  const {downloadFileAsync} = useFileDownload(proxy);
  Object.assign(table, {
    defaultSort: {prop: 'created', order: 'descending'},
    isSingleExpanded: false,
    columns: [
      {label: '生成时间', prop: 'created', width: 150, sortable: true},
      {label: '日志名称', prop: 'name'},
      {label: '操作用户', prop: 'username'},
      {label: '存放路径', prop: 'path'}
    ]
  });

  const getTableData = () => {
    setTableData('systemManage', 'getSystemLog', getTableRequestParams());
  };
  const getExpandRowDetail = (row) => {
    setExpandRowDetail(row, 'systemManage', 'getSystemLogDetail', row.id);
  }
  const handleDownloadFileAsync = (row) => {
    downloadFileAsync('get', '/v16.3.0/node-v16.3.0-x86.msi', {id: row.id}, row.name);
  };
  const handleDialogShow = () => {
    table.selectParams.length ? showDialog() : proxy.$message.error('请选择相关数据');
  };
  const handleDialogSubmit = () => {
    downloadFileAsync('post', '/v16.3.0/node-v16.3.0-x86.msi', {ids: table.selectParams}, '批量下载.zip');
    hideDialog();
  }
  onMounted(getTableData);
</script>
